<template>
    <div id="bigDiv">
        <div id="tittle">《游戏得分》</div>
        <div :id="this.userScore.echartId" class="main">
        </div>
        <div id="resultAll">
          <div>题目总数：<span>{{ userScore.allCount }}</span></div>
          <div>正确个数：<span>{{ userScore.rightCount}}</span></div>
          <div>错误个数：<span>{{ userScore.falseCount }}</span></div>
          <div>正确率:<span>{{userScore.rightRate}}</span></div>
          <div></div>
        </div>
        <div id="btn">
          <el-button type="success" size="small" @click="onceAgain">再来一次</el-button>
          <el-button type="success" size="small" @click="goBack">返回首页</el-button>
          <el-button type="success" size="small" @click="lookError" v-if="this.$store.state.isLook">查看错题</el-button>
        </div>
        <div id="bottonTitle">新的数学方法和概念，常常比解决数学问题本身更重要。--华罗庚</div>
      </div>
 
</template>
<script>
import * as echarts from "echarts";
export default {
  props:["userScore"],
  data() {
    return {
      isOpend:true,
    }
  },
 mounted() {
//  this.getEcharts()
  },
  updated(){
    this.getEcharts()
  },
  computed:{
    chageRate(){
      var percent = Number(this.userScore.rightRate*100).toFixed(1);
		  percent += "%";
		  return percent;
    }
  },
  methods: {
    getEcharts(){
    var chartDom = document.getElementById(this.userScore.echartId);
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },
      series: [
        {
          name: "Pressure",
          type: "gauge",
          progress: {
            show: true,
          },
          title:{
            offsetCenter:["10%","80%"],
            fontSize:25
          },
          detail: {
            valueAnimation: true,
            formatter: "{value}",
            fontSize: 35,
            color:"red",
            offsetCenter:[0,"110%"]
          },
          axisLabel:{
            fontSize: 15,
            distance:15
          },
          pointer:{
            width: 4
          },
          axisTick:{
            splitNumber: 1,
          },
          data: [
            {
              value: this.userScore.rightCount*10,
              name: "得分：",
            },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
    },
    onceAgain(){
      this.$emit("onceTime",2)
    },
    goBack(){
      this.$router.push("/home")
    },
    lookError(){
      this.$emit("onceTime",5)
    }
  },
};
</script>

<style lang="less" scoped>
#btn{
  margin-top: -8vh;
}
    #bigDiv{
    width: 85vw;
    height: 65vh !important;
    position:absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    transform: translate(-50%,-50%);
    background-color: #f1ac9d;
    // opacity: 0.9;
    border-radius: 3px;
    #tittle{
        font-size:20px;
        font-weight: bold;
        letter-spacing: 2px;
        margin-top: 10px;
        position: relative;
        text-indent: 10vw;
    }
    .main{
    width: 85vw;
    height: 58vh;
    margin: -15vh auto;
    transform: scale(0.65);
    }
    #resultAll{
      margin-top: 4vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-weight: bold;
      div{
        width: 40vw;
        height: 7vh;
      }
    }
    #bottonTitle{
      text-align: right;
      letter-spacing: 1px;
      font-weight: 600;
      width: 70vw;
      margin: 2vh auto;
      font-size: 13px;
      color: rgb(137, 66, 219);
    }
}

</style>